import './imports'
import '../components/Header/index.scss'
import '../components/NavBar/index.scss'
import '../components/NewsList/index.scss'
import HTTP from '../libs/http'

import wrapperTpl from '../components/NewsList/tpl/wrapper.tpl'
import tpl0 from '../components/NewsList/tpl/tpl0.tpl';
import tpl1 from '../components/NewsList/tpl/tpl1.tpl';
import tpl2 from '../components/NewsList/tpl/tpl2.tpl';
import tpl3 from '../components/NewsList/tpl/tpl3.tpl';

var oListWrapper = null;
const oApp = document.querySelector('#app');
let curIdx = 0;
const config = {
    type: 'top',
    count: 10,
    pageNum: 0
}
const newsData = {};
//1 选中元素
const oNavBar = oApp.getElementsByClassName('nav')[0];
const oNavItems = oNavBar.getElementsByClassName('item')

//2 绑定事件处理函数
oNavBar.addEventListener('click', onNavBarClick, false);


//3 写事件处理函数逻辑
function onNavBarClick(ev) {
    const e = ev || window.event,
        tar = e.target || e.srcElement,
        className = tar.className;
    if (className === 'item') {
        const type = tar.dataset.type;
        setType(type);
        scrollToTop();
        oNavItems[curIdx].className = 'item';
        curIdx = [].indexOf.call(oNavItems, tar);
        oNavItems[curIdx].className += ' current';
    }
}

function scrollToTop() {
    window.scrollTo(0, 0)
}
function setType(type) {
    config.type = type;
    console.log(config.type);
}
const http = new HTTP();

function setNewsList(type, count) {
    http.ajax({
        url: 'Juhe/getNewsList',
        type: 'POST',
        dataType: 'JSON',
        data: {
            field: type
        },
        success(data) {
            handleSuccess(data, count, type)
            // const pageData = setPageData(data.result.data, count)
            // //resolve(pageData)
            // console.log(pageData)
        },
        error(err) {
            //  reject(err)
        }
    })
}
render();
setNewsList(config.type, config.count)

function setPageData(data, count) {
    const len = data.length;
    let pageData = [];
    let index = 0;
    while (index < len) {
        pageData.push(data.slice(index, index += count))
    }
    return pageData;
}
function handleSuccess(data, count, type) {
    if (newsData[type]) { return }

    newsData[type] = setPageData(data.result.data, count);
    renderList(newsData[type][config.pageNum])
}


//渲染首页

function getWrapperTpl(top) {
    return wrapperTpl().replace(/{{(.*?)}}/g, function (node, key) {
        return {
            top
        }[key];
    })
}
function getNewsListTpl(data, pageNum) {
    let list = '';
    let tpl = '';
    data.map((item, index) => {
        if (!item.thumbnail_pic_s) { tpl = tpl0; }
        else if (item.thumbnail_pic_s && !item.thumbnail_pic_s02) { tpl = tpl1; }
        else if (item.thumbnail_pic_s02 && !item.thumbnail_pic_s03) { tpl = tpl2; }
        else if (item.thumbnail_pic_s03) { tpl = tpl3 }
        list += tpl().replace(/{{(.*?)}}/g, function (node, key) {
            return {
                pageNum,
                index,
                uniquekey: item.uniquekey,
                url: item.url,
                author: item.author_name,
                data: item.date,
                thumbnail_pic_s: item.thumbnail_pic_s,
                thumbnail_pic_s02: item.thumbnail_pic_s02,
                thumbnail_pic_s03: item.thumbnail_pic_s03,
                title: item.title,
                category: item.category
            }[key];
        }
        )
    })
    return list;
}



function renderList(data) {
    const { pageNum } = config;
    const newsListTpl = getNewsListTpl(data, pageNum)
    oListWrapper.innerHTML += newsListTpl;
}


function render() {
    const listWrapperTpl = getWrapperTpl(82);
    oApp.innerHTML += listWrapperTpl;
    oListWrapper = oApp.querySelector('.news-list')
}

